<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理系统</title>
    <script>
        function addEmp(){
            // 创建tr
            let trChild = document.createElement("tr");
            // 创建td
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operatorTd = document.createElement("td");
            // 创建超链接
            let aChild = document.createElement("a");

            // 获取用户在表单元素中输入的数据
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;
            // 创建文本
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);
            let aText = document.createTextNode("删除");

            // 将文本插入到对应的元素中
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            aChild.appendChild(aText);
            aChild.href = "javascript:;";
            // 为超链接绑定删除事件
            aChild.onclick = function(){
                // 执行删除
                // 需要实现删除当前所点击的这一行
                // 在js中,可以通过this获取到当前事件所在的事件源
                // this在此处即为超链接
                // 通过this.parentNode.parentNode获取到当前所在的行
                t.removeChild(this.parentNode.parentNode);
            };

            operatorTd.appendChild(aChild);

            // 将td插入到tr中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operatorTd);

            // 将tr插入到表格中
            let t = document.getElementById("t");
            t.appendChild(trChild);

        }
    </script>
</head>
<body>
<!--
    需求1:添加操作
        在表格中,初始情况下是没有员工的
        当用户添加了某个员工之后
        该员工会添加到表格中
        表格中的信息即为添加的员工信息
        添加多少个员工,表格中就有多少行
    需求2:删除操作
        当用户点击了某一个员工的删除链接时
        该员工从当前表格中移除
-->
<h1>添加员工信息</h1>
姓名:<input type="text" id="name"/><br/>
工资:<input type="text" id="salary"/><br/>
<input type="button" value="添加" onclick="addEmp()"/>
<hr/>
<table id="t" border="1" style="background: #dddddd;width: 400px;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>admin</td>-->
        <!--<td>5000</td>-->
        <!--<td>-->
            <!--<a href="javascript:;">删除</a>-->
        <!--</td>-->
    <!--</tr>-->
</table>

</body>
</html>